<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="style/fjol_style.css" rel="stylesheet" />
	</head>

	<body>
		
		<!--下拉刷新容器-->
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper" style="z-index: -1;">
		  <div class="mui-scroll">
		    <!--数据列表-->
		    <ul class="mui-table-view mui-table-view-chevron" id="houselist">
		      
		    </ul>
		  </div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/jquery.tmpl.min.js"></script>
		<script src="js/generalUtil.js"></script>
		<script src="js/md5.js"></script>
		<script src="js/network.js"></script>
		<script id="houseListTmpl" type="text/x-jquery-tmpl">
			<li class="mui-table-view-cell" id="${id}">
		        <a href="javascript:;" class="mui-navigate-right" style="padding-right:20px;">
		            <img class="mui-pull-left mr5" width="100" height="80" src="${coverImage}">
		            <div class="mui-media-body">
		                <span style="font-weight: bold;">${title}</span>
		                <div class="mui-clearfix">
		                	<span class="mui-badge mui-badge-success mui-badge-inverted f14 mui-pull-right">${parseInt(totalPrice/10000)}万</span>
		                	<div>
		                		<p class="mui-ellipsis">${bedRoomNumber}室 ${livingRoomNumber}厅 ${square}平</p>
		                		{{each(i,word) $item.getkeywordArr()}}
		                		<button type="button" class="mui-badge color02b260 mr5">${word}</button>
		                		{{/each}}
		                	</div>
		                </div>
		            </div>
		        </a>
		    </li>
		</script>
		<script type="text/javascript">
			mui.init({
				pullRefresh:{
					container:"#refreshContainer",
					down:{
						callback: pulldownRefresh
					},
					up:{
						callback:pullupRefresh
					}
				}
			});
			
			var pagevalue =1;
			function pulldownRefresh(){
				$('.mui-pull').hide();
				setTimeout(function(){
					getHouseList(1,true);
					mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
					return pagevalue=1;
				},1000);
			}
			function pullupRefresh(){
				$('.mui-pull').show();
				setTimeout(function(){
					pagevalue++;
					getHouseList(pagevalue,false);
				},1000);
			}
			
			mui.plusReady(function(){
//				console.log(pagevalue);
				getHouseList(1,false);
				mui('#houselist').on('tap','li',function(){
					mui.openWindow({
						url:'house_detail.html',
						id:'house_detail',
						extras:{
							houseId:this.getAttribute('id')
						}
					})
				});
			});
			
			function getHouseList(pagevalue,isTrue,moreParam){

				var param = [{
					key:'page',
					value:pagevalue
				},{
					key:'rows',
					value:10
				}];
				if(moreParam){
					param[2] = moreParam;
				}
				fjNetwork.get('fjzx/common/searchHouseList.json',param,function(data){
//					console.log(JSON.stringify(data));
					var rows = data.rows;
					if(isTrue){
						document.querySelector('#houselist').innerHTML = '';
					}
					$('#houseListTmpl').tmpl(rows,{
						getkeywordArr:function(){
							var keywords = new Array();
							if(this.data.keyword){
								keywords = this.data.keyword.split(',');
							}else{
								keywords = '';
							}
							return keywords;
						}
					}).appendTo('#houselist');
					
					mui('#refreshContainer').pullRefresh().endPullupToRefresh(rows.length==0);
				},function(msg){
					mui.toast(msg);
				});
			}
		</script>
	</body>

</html>